<template>
  <div class="chart"></div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import elementResizeDetectorMaker from 'element-resize-detector';

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, GraphChart, LineChart, PieChart, MapChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  DatasetComponent,
  DataZoomComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  BarChart,
  GraphChart,
  LineChart,
  MapChart,
  PieChart,
  DataZoomComponent,
  UniversalTransition,
  CanvasRenderer,
  DatasetComponent,
]);

export { echarts };

@Component({})
export default class Chart extends Vue {
  protected $chart: any = null;
  protected $resizeDetector: any = null;

  // 配置参数
  @Prop({ type: Object })
  protected options!: any;

  // 是否自动缩放
  @Prop({ type: Boolean })
  protected autoresize!: boolean;

  @Watch('options')
  protected optionsChanged(newVal: any, oldVal: any) {
    if (newVal == oldVal) return;

    this.init();
  }

  // 初始化
  protected init() {
    if (!this.$chart) {
      this.$chart = echarts.init(this.$el as any);
      this.$chart.on('click', (params: any) => {
        this.$emit('on-click', params);
      });
    }
    setTimeout(() => {
      this.$chart.clear();
      if (this.options) this.$chart.setOption(this.options);
    });
  }

  protected resize() {
    if (this.$chart) {
      this.$chart.resize();
    }
  }

  protected addResizeEventListener() {
    if (this.autoresize) {
      this.$resizeDetector = elementResizeDetectorMaker({
        strategy: 'scroll',
      });

      this.$resizeDetector.listenTo(this.$el as any, this.resize);
    }
  }

  protected removeResizeEventListener() {
    if (this.autoresize && this.$resizeDetector) {
      this.$resizeDetector.uninstall(this.$el);
    }
  }

  mounted() {
    this.init();
    this.addResizeEventListener();
    this.$emit('on-init', echarts);
  }

  beforeDestroy() {
    this.removeResizeEventListener();
    if (this.$chart) {
      this.$chart.off('click');
      this.$chart.dispose();
    }
  }
}
</script>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
}
</style>
